<template>
  <div>
    <div id="case-single">
      <!-- BREADCRUMBS -->
      <div class="page-header">
        <div class="container">
          <h1 class="page-title pull-left">案例 CASE</h1>
          <ol class="breadcrumb">
            <li>
              <router-link :to="{ name: 'home'}">首页</router-link>
            </li>
            <li>
              <router-link :to="{ name: 'case-list' , params:{'id': 3}}">案例</router-link>
            </li>
            <li class="active">案例详情</li>
          </ol>
        </div>
      </div>
      <!-- END BREADCRUMBS -->
      <!-- PAGE CONTENT -->
      <div class="page-content">
        <div class="container">
          <!-- PORTFOLIO ITEM -->
          <el-carousel height="400px" type="card">
            <el-carousel-item v-for="item in items" :key="item.id">
              <img :src="item.img" class="img-responsive" alt="Slider Image">
            </el-carousel-item>
          </el-carousel>
          <div class="row">
            <div class="col-md-8">
              <section>
                <h2 class="section-heading">项目描述 PROJECT DESCRIPTION</h2>
                <p class="lead">Continually customize alternative results with cross-media action items. Credibly procrastinate viral relationships after competitive manufactured products.</p>
                <p>Dynamically syndicate open-source content through global potentialities. Proactively cultivate optimal potentialities after bricks-and-clicks technologies. Compellingly empower extensible benefits and holistic bandwidth. Professionally expedite client-based schemas before resource-leveling vortals. Professionally enable customer directed intellectual capital via highly efficient convergence. Continually customize alternative results with cross-media action items. Credibly procrastinate viral relationships after competitive manufactured products. Compellingly harness viral ideas through wireless services. Holisticly utilize future-proof networks rather than granular communities. Proactively.</p>
              </section>
            </div>
            <div class="col-md-4">
              <section>
                <h2 class="section-heading">项目详情 PROJECT DETAIL</h2>
                <ul class="list-unstyled project-detail-list">
                  <li>
                    <strong>Title:</strong> Awesome Photography</li>
                  <li>
                    <strong>Client:</strong> Digital House Inc.</li>
                  <li>
                    <strong>Skills:</strong> Photography, Lightroom, Photoshop</li>
                  <li>
                    <strong>Categories:</strong>
                    <a href="#">Photography</a>,
                    <a href="#">Corporate</a>
                  </li>
                </ul>
                <!-- <a href="#" class="btn btn-default">
                  <i class="fa fa-external-link"></i> Visit Website</a> -->
                <a href="#" class="btn btn-default">
                  <i class="fa fa-external-link"></i> 访问网站</a>
              </section>
            </div>
          </div>
          <!-- END PORTFOLIO ITEM -->
          <hr>
          <!-- RELATED PORTFOLIO -->
          <!-- <div class="portfolio-item-wrapper portfolio-related">
            <h2 class="section-heading">RELATED WORKS</h2>
            <ul class="portfolio-item-list spaced row">
              <li class="col-md-4">
                <div class="portfolio-item">
                  <div class="overlay"></div>
                  <div class="info">
                    <h4 class="title">The Guitar</h4>
                    <a href="#" class="btn">read more</a>
                  </div>
                  <div class="media-wrapper">
                    <img src="@/assets/img/portfolio/800x500/work1.png" alt="This is the description">
                  </div>
                </div>
              </li>
              <li class="col-md-4">
                <div class="portfolio-item">
                  <div class="overlay"></div>
                  <div class="info">
                    <h4 class="title">Skyscraper</h4>
                    <a href="#" class="btn">read more</a>
                  </div>
                  <div class="media-wrapper">
                    <img src="@/assets/img/portfolio/800x500/work3.png" alt="Portfolio Thumbnail">
                  </div>
                </div>
              </li>
              <li class="col-md-4">
                <div class="portfolio-item">
                  <div class="overlay"></div>
                  <div class="info">
                    <h4 class="title">Heaven</h4>
                    <a href="#" class="btn">read more</a>
                  </div>
                  <div class="media-wrapper">
                    <img src="@/assets/img/portfolio/800x500/work4.png" alt="Portfolio Thumbnail">
                  </div>
                </div>
              </li>
            </ul>
          </div> -->
          <!-- END RELATED PORTFOLIO -->
        </div>
      </div>
      <!-- END PAGE CONTENT -->
    </div>
  </div>
</template>

<script>
const img1 = require("@/assets/img/portfolio/single/bicycle.jpg");
const img2 = require("@/assets/img/portfolio/single/blurred_lines.jpg");
const img3 = require("@/assets/img/portfolio/single/edge.jpg");
export default {
  components: {},
  data() {
    return {
      items: [
        {
          id: 0,
          img: img1
        },
        {
          id: 1,
          img: img2
        },
        {
          id: 2,
          img: img3
        }
      ]
    };
  }
};
</script>

<style lang="less">
#case-single {
}
</style>
